﻿@{
    ViewBag.Title = "CloneElement";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<style>
	.label {
		width:150px;
	}
	.input {
		width: 500px;
	}
	.highlight {
		border: 3px dotted red;
		background-color: yellow;
	}
</style>

<h2>Clone Element</h2>

Billing Address:
<div class="billingAddress">
    <div class="label">Name: </div>
    <div class="text"><input type="text" class="inputbox"></div><br>
    <div class="label">Address: </div>
    <div class="text"><input type="text" class="inputbox"></div>
</div><br>
	
Shipping Address same as Billing Address: <input id="chkShippingAddress" type="checkbox"><br><br>
	
Shipping Address:
<div id="shippingAddress"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#chkShippingAddress").click(function () {
            if ($(this).prop("checked")) {
                $("#shippingAddress").append($(".billingAddress").clone());
            } else {
                $("#shippingAddress > .billingAddress").remove();
            }
        });
    });
</script>
